<template>
	<view>
		<zx-nav title="查看评价"></zx-nav>
		<view class="goodsinfo">
			<view class="u-flex">
				<view class="imgbox" v-if="orderInfo.product_img && orderInfo.product_img.length > 0">
					<image :src="orderInfo.product_img[0] + '?imageView2/0/w/100'" mode="widthFix"></image>
				</view>
				<view class="flex-sub u-flex  u-flex-column">
					<view class="name ">
						<text>
							{{ orderInfo.product_name }}
							<text class="u-primary ml10">{{ orderInfo.product_dengji_ || '' }}</text>
						</text>
					</view>
					<view class="num flex-sub">{{ orderInfo.title }}</view>
					<view class="shopinfo">{{ orderInfo.supplier_name }}</view>
				</view>
			</view>
			<view class="comment-info">
				<view class="u-flex u-col-center u-row-between ">
					<view class="title">评价时间</view>
					<view>{{ orderInfo.created_at }}</view>
				</view>
				<view class="u-flex u-col-center u-row-between">
					<view class="title">订单编号</view>
					<view>
						{{ orderInfo.order_no }}
						<text class="text-primary ml30 margin-left-sm" @click="copyOrder(orderInfo.order_no)">复制</text>
					</view>
				</view>
				<view class="u-flex u-col-center u-row-between">
					<view class="title">商品评分</view>
					<view>
						<tui-rate :current="index" :size="20"></tui-rate>
						<text class="num ml10" :style="{ color: index == 0 ? '#c9c9c9' : '#FF3C47' }">{{ index ? index : '暂无评价' }}</text>
					</view>
				</view>
			</view>
			<view class="comment-con">{{ orderInfo.info }}</view>
			<view class="uploadImg u-flex u-flex-wrap">
				<view class="tui-image-item" v-for="(item, index) in orderInfo.img_url" :key="index" @tap="previewImage(orderInfo.img_url, index)">
					<image :src="item + '?imageView2/0/w/180'" class="tui-item-img" mode="aspectFill"></image>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import tuiUpload from '@/components/tui-upload/tui-upload.vue';
import tuiRate from '@/components/rate/rate';
export default {
	data() {
		return {
			tabIndex: 1,
			type: 0,
			index: 0,
			imageList: [1, 2],
			orderInfo: {}
		};
	},
	components: {
		tuiRate
	},
	onLoad(options) {
		this.orderEvaluate(options.order_product_id);
	},
	methods: {
		//订单详情
		orderEvaluate(order_product_id) {
			let $me = this;
			$me.$getAction($me.$api.orderEvaluate + order_product_id).then(da => {
				if (da.code == 0) {
					// da.data.img_url = da.data.img_url ? da.data.img_url.split(',') : [];
					// console.log('da.data.img_url',da.data.img_url)
					this.orderInfo = da.data;
					this.index = this.orderInfo.grade;
				}
			});
		},
		//复制单号
		copyOrder(value) {
			uni.setClipboardData({
				data: value,
				success: function() {
					console.log('success');
				}
			});
		},
		previewImage: function(imageList, index) {
			if (!imageList.length) return;
			uni.previewImage({
				current: imageList[index],
				loop: true,
				urls: imageList
			});
		}
	}
};
</script>

<style lang="scss">
page,
.pageview {
	height: 100%;
	width: 100%;
	background: #fff;
	.goodsinfo {
		background: #fff;
		color: $u-content-color;
		padding: 36upx 30upx;
		font-size: 24upx;
		.name {
			font-size: 32upx;
			font-weight: 500;
			color: $u-main-color;
		}

		.imgbox {
			width: 160upx;
			height: 160upx;
			margin-right: 25upx;
			image {
				height: 100%;
				width: 100%;
				display: block;
				border-radius: 8upx;
			}
		}

		.num {
			padding: 10upx 0;
		}

		.comment-info {
			margin-top: 80upx;
			font-size: 28upx;
			color: #999;
			.u-flex {
				margin-bottom: 36upx;
			}
			.title {
				color: #000;
			}
		}
		.comment-con {
			margin-top: 50upx;
			color: #636366;
			font-size: 32upx;
			line-height: 52upx;
		}
		.uploadImg {
			margin-top: 24upx;
			.tui-image-item {
				width: calc((100vw - 100upx) / 3);
				height: calc((100vw - 100upx) / 3);
				// margin-right: 30rpx;
				display: inline-block;
				margin: 10upx 0;
				// margin-bottom: 20rpx;
			}

			.tui-image-item:nth-of-type(3n + 2) {
				margin: 10upx 20upx;
			}

			.tui-item-img {
				width: 100%;
				height: 100%;
				display: block;
				border-radius: 10upx;
				z-index: 0;
			}
		}
		.rate {
			margin-top: 50upx;
			.ratename {
				font-size: 28upx;
				margin-right: 30upx;
				vertical-align: top;
			}
			.num {
				font-size: 26upx;
				color: #c9c9c9;
				margin-left: 30upx;
			}
		}
	}

	.main {
		overflow: auto;
		margin-top: 20upx;
	}
}
</style>
